﻿<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>body</title>
 <style type="text/css">
 a{ text-decoration:none;}
 ul,li{ list-style:none; padding:0px; margin:auto; text-align:center;}
 ul{ padding-left:50px;}
 
            body{
            	background:#D6D3C9;
				color:#383835;
				font-family:Arial, Arial, Helvetica, sans-serif;
            }
			
			
            #bubblemenu li {
                display: inline;
                margin-left: 15px;
				cursor:pointer;
            }
			
            
            #bubblemenu li > div {
                width: 150px;
                min-height: 10px;
			    position: absolute;
                display: inline;
                margin-left: -120px;
                padding: 2px;
				visibility:hidden;
                opacity: 0;
                margin-left: 50px;
				background: #ffffff;
				font-size:1em;
				
				/* Setting the border-radius property for all Browsers */
                -moz-border-radius: 5px; /* Firefox */
                -webkit-border-radius: 5px; /* Safari and Chrome */
                border-radius: 5px; /* Browsers that Support it like Opera */
				
				/* Setting the box-shadow property for all Browsers */
                -moz-box-shadow: 0 0 8px gray; /* Firefox */
                -webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */
				filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */
                box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */

				/* Setting the transition property for all Browsers */
				-moz-transition: all 0.5s ease-in-out; /* Firefox */
                -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
                -o-transition: all 0.5s ease-in-out; /* Opera */
                transition: all 0.5s ease-in-out; /* Browsers that Support it */

				
            }
            
			
            #bubblemenu li:hover > div {
            	
				visibility:visible;
                opacity: 1;
                margin-left: 50px;
				
				/* Setting the transition property for all Browsers */
				-moz-transition: all 0.5s ease-in-out; /* Firefox */
                -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
                -o-transition: all 0.5s ease-in-out;  /* Opera */
                transition: all 0.5s ease-in-out; /* Browsers that Support it */
            }
        </style>
    </head>
    <body>
   
   
   
    <ul id="bubblemenu">
    <table width="500px" border="0">
  <tr>
    <td>编号</td>
    <td>标题</td>
    <td>时间</td>
  </tr>
  <tr>
    <td>1</td>
    <td><li>
           <a href="web/mess_1.html" target="body">放假休息</a>
            <div>
               经理：明天开始，公司休息一周，所有员工都不需要加班。
            </div>
        </li></td>
    <td>2012-12-04</td>
  </tr>
  <tr>
    <td>2</td>
    <td><li>
          <a href="web/mess_2.html" target="body">个人信息更新</a>
            <div>
              人事部门经理：请所有员工尽快提交最新个人信息。
            </div>
        </li></td>
    <td>2012-12-04</td>
  </tr>
   <tr>
    <td>3</td>
    <td><li>
          <a href="web/mess_3.html" target="body">员工病假通知</a>
            <div>
               部门经历：员工请病假，必要要有医院开据的诊断证明。
            </div>
        </li></td>
    <td>2012-12-04</td>
  </tr>
</table>
    </ul>
</body>
</html>